import { useState, useEffect } from 'react'
import { Carousel} from 'antd';

import { getBanner,getGoodList } from "../../tools/ajax"
import HomeTitle from "../../components/homeTitle/HomeTitle"
import ProductList from "../../components/productList/ProductList"
import "./home.css"



export default () => {

    const [banner, setBanner] = useState([])
    const [goodsData, setGoodsData] = useState([])
    const [page, setPage] = useState(1)


    useEffect(() => {
        getBanner().then(res => {
            let { data: bannerData } = res;
            // console.log("wwwwwwwwwwwwww", bannerData.data);
            // banner.push(...bannerData.data)
            // setBanner([...banner])
            setBanner([...bannerData.data])
        })

        getGoodList({ page: page }).then(res => {
            let { data: goodsData } = res;
            // console.log("wwwwwwwwwwwwww", goodsData);
            setGoodsData([...goodsData])
        })
    }, [])



    return (
        <div className="home" id="scrollableDiv">
            <HomeTitle />

            <div className="home-banner">
                <Carousel autoplay>
                    {
                        banner.map((item,i)=>{
                            return  <img src={item} key={i} alt="" />  
                        }) 
                    }
                </Carousel>
            </div>

            <ProductList goodList={goodsData} />

        </div>
        
    )
}